<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :backIconColor="'#333'" :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				积分核销
			</text>
		</base-nav-bar>
		<view class="content-box u-p-20 u-m-t-30 u-m-l-40 u-m-r-40">
			<!-- grid商家功能模块 -->
			<view class="u-flex u-flex-items-center u-flex-start u-flex-wrap">
				<u--form :model="form" ref="uForm" :labelPosition="'top'" style="width: 100%;" :labelStyle="{'margin-botttom':'10rpx'}">
					<u-form-item label="请输入手机号" prop="phone" labelWidth="120">
						<u-input v-model="form.phone" placeholder="请输入手机号"/>
					</u-form-item>
					<u-form-item label="核销课程" labelWidth="120"
					             prop="course_name"
					             ref="item1"
					             @click="openClass()">
						<u-input
							v-model="form.course_name"
							placeholder="请选择核销课程"
							suffixIcon="arrow-right"
							suffixIconStyle="color: #909399"
							readonly
						></u-input>
					</u-form-item>
					<u-form-item label="核销积分" prop="score" labelWidth="120">
						<u-input v-model="form.score" placeholder="请输入需要充值的积分数量"/>
					</u-form-item>
				</u--form>
				<view class="submit-btn" @click="submit">提交</view>
			</view>
		</view>
		<u-picker :close-on-click-overlay="true" :show="showClass" :columns="classList" :title="'选择核销课程'" key-name="name" @confirm="chooseClass($event)" @cancel="closeClass()"></u-picker>
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
import { HTTP_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			showType:false,
			showClass:false,
			form: {
				phone: '',
				score:'',
				course_name:'',
				course_id:''
			},
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				score: [
					{
						required: true,
						message: '请输入核销积分',
						trigger: ['blur', 'change']
					}
				],
				course_name: [
					{
						required: true,
						message: '请选择核销课程',
						trigger: ['blur', 'change']
					}
				],
			},
			classList: [
			],
		};
	},
	computed: {
		...mapGetters(['isLogin','userInfo']),
		
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
		this.getClassList()
	},
	onHide() {
	},
	onLoad() {
	
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url: path,
				query: parmas
			});
		},
		redictJump(path, parmas) {
			uni.redirectTo({
				url: path,
				query: parmas
			});
		},
		
		submit() {
			//
			this.$refs.uForm.validate().then(res => {
				let fromData = {
					...this.form
				}
				this.$Api.merchant.scoreoff(fromData).then(res=>{
					if(res.code == 1){
						uni.$u.toast('核销成功')
						setTimeout(()=>{
							this.redictJump('/pages-merchant/points/integralSuccessfully');
						},500)
					}else{
						uni.$u.toast(res.msg)
					}
					
				}).catch(err=>{
					console.log(e)
				})
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		openClass(){
			this.showClass = true;
			console.log("====this.showType",this.showClass)
		},
		chooseClass(e){
			this.showClass = false;
			console.log("222---e",e);
			this.form.course_id = e.value[0].id
			this.form.course_name = e.value[0].name
		},
		closeClass(){
			this.showClass = false;
		},
		getClassList(){
			var that = this;
			that.classList = [];
			that.$Api.merchant.allcourseList().then(res=>{
				that.classList.push(res.data);
			}).catch(err=>{
				console.log(e)
			})
		},
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}
.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	.swipers{
		width: 100%;
	}
}
.nickname{
	font-size: 34rpx;
	font-weight: bold;
}
.content-box{
	background: #FFFFFF;
	border-radius: 30rpx;
	min-height: 80vh;
	.pay-item{
		width: 25%;
	}
}
::v-deep .u-form{
	width: 100%;
}
.images-content{
	width: 100%;
	height: 300rpx;
	display: flex;
	border:1rpx solid #eee;
}
.submit-btn{
	margin-top: 20rpx;
	width: 100%;
	height: 84rpx;
	background: linear-gradient( #30AA4D 0%, #20CE83 100%);
	box-shadow: 0px 2px 4px 0px rgba(48,170,77,0.1);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 28rpx;
}
</style>
